<template>
  <div>
    <el-button type="primary" style="height: 80%" @click="optdisplay=true">加入条件</el-button>
    <el-dialog title="条件选择" :visible.sync="optdisplay" width="500">
      <!-- @tab-click="" -->

      <el-tabs v-model="optval.opt">
        <el-tab-pane
          v-for="i in optmenu"
          :key="i.value"
          :label="i.label"
          :name="i.value.toString()"
        />
      </el-tabs>
      <el-date-picker
        v-model="optval.date"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        :picker-options="pickerOptions"
      />
      <el-select v-model="optval.address" placeholder="请选择">
        <el-option label="取消选择" :value="undefined" />
        <el-option
          v-for="item in addrs"
          :key="item.ID"
          :label="item.name"
          :value="item.name"
          :disabled="!item.state"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="optdisplay = false">取 消</el-button>
        <el-button type="primary" @click="optdisplay = false;mopt(true)">确 定</el-button>
      </span>
    </el-dialog>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="ID" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="display.name" label="昵称" width="120" />
      <el-table-column prop="recv[0].address" label="地址" />
      <el-table-column prop="createTime" label="注册时间" width="120" />
      <el-table-column fixed="right" label="操作" width="170">
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="change(scope.row)">修改</el-button>
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.state"
            @change="upData({ID: scope.row.ID, state: scope.row.state})"
          ></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="pageSizeChange"
      @current-change="pageCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="page.page_sizes"
      :page-size="page.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    ></el-pagination>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="cdata" :model="cdata" label-width="80px">
        <el-form-item label="创建时间">
          <el-input v-model="cdata.createTime" disabled />
        </el-form-item>
        <el-form-item label="修改时间">
          <el-input v-model="cdata.changeTime" disabled />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="cdata.name" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="cdata.tel" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="dname" />
        </el-form-item>
        <el-form-item label="登录名">
          <el-input v-model="cdata.username" disabled />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="cdata.password" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="recv.address" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="change(cdata,1)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      page: {
        total: -1,
        page_sizes: [10, 20, 30, 40],
        page_size: 10,
        currentPage: 1
      },
      cdata: {},
      dialogVisible: false,
      dname: "",
      address: "",
      recv: {},
      optdisplay: false,
      addrs: [],
      optval: {
        opt: "createTime"
      },
      optmenu: [
        { value: "createTime", label: "注册时间" },
        { value: "useTime", label: "登录时间" }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(new Date(start.toDateString()).getTime());
              end.setTime(start.getTime() + (3600 * 24 - 1) * 1000);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                new Date(start.toDateString()).getTime() - 3600 * 1000 * 24
              );
              end.setTime(start.getTime() + (3600 * 24 - 1) * 1000);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      aval: {}
    };
  },
  methods: {
    mopt(get) {
      let date = false;
      if (this.optval.date) {
        date = this.optval.date;
      }
      // else {
      //   const end = new Date();
      //   const start = new Date();
      //   start.setTime(new Date(start.toDateString()).getTime());
      //   end.setTime(start.getTime() + (3600 * 24 - 1) * 1000);
      //   date = [start, end];
      // }
      if (date) {
        this.aval.other =
          " and " +
          this.optval.opt +
          ">" +
          parseInt(date[0] / 1000) +
          " and " +
          this.optval.opt +
          "<" +
          parseInt(date[1] / 1000);
      } else this.aval.other = undefined;
      if (this.optval.address) {
        this.aval.address = "like " + this.optval.address + "%";
      } else this.aval.address = undefined;
      this.page.total = -1;
      if (get) this.getData();
      // console.log(this.$cp(this.optval));
      // console.log(this.$cp(this.aval));
    },
    // 时间戳转换成时间
    formatTime(time) {
      var date = new Date(time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      return date.toLocaleString();
    },
    // 页面切换
    pageCurrentChange(val) {
      if (val == undefined) {
        this.page.currentPage = 1;
      } else {
        this.page.currentPage = val;
      }
      this.getData();
    },
    pageSizeChange(val) {
      if (val == undefined) {
        this.page.page_size = 10;
      } else {
        this.page.page_size = val;
      }
      this.pageCurrentChange(1);
    },
    // 获取数据
    getData(cmd) {
      let d = {
        cmd: 0,
        val: {
          token: sessionStorage.token,
          table: "users",
          other: " ORDER BY ID ASC"
        }
      };
      if (this.aval) d.val = Object.assign(d.val, this.aval);
      if (this.page.total < 0) {
        const dd = this.$cp(d);
        dd.val.sum = true;
        this.$axios.post("q.php", dd).then(res => {
          if (res.data.result) {
            this.page.total = res.data.result.sum;
            // this.getData(cmd);
          } else {
            this.$message({
              showClose: true,
              message: "当前数据为空",
              type: "error"
            });
          }
        });
        // return;
      }
      d.val.limit =
        (this.page.currentPage - 1) * this.page.page_size +
        "," +
        this.page.page_size;
      this.$axios.post("q.php", d).then(res => {
        for (const k in res.data.result) {
          res.data.result[k].createTime = this.formatTime(
            res.data.result[k].createTime
          );
          res.data.result[k].changeTime = this.formatTime(
            res.data.result[k].changeTime
          );
        }
        this.tableData = res.data.result;
        // this.cdata=res.data.result[0];
        // console.log(this.$cp(res.data.result[0]));
      });
    },
    upData(cmd) {
      if (!cmd || !cmd.ID) return;
      const data = {
        cmd: 1,
        val: {
          token: sessionStorage.token,
          table: "users"
        }
      };
      data.val = Object.assign(data.val, this.$del(cmd));
      this.$axios.post("q.php", data).then(res => {
        // console.log(res.data);
        if (res.data) {
          this.$message({
            showClose: true,
            message: "修改数据成功",
            type: "success"
          });
        } else {
          this.$message({
            showClose: true,
            message: "修改数据失败!服务器繁忙或登陆过期",
            type: "error"
          });
        }
      });
    },
    // 修改按钮被单击
    change(cmd, b) {
      if (b) {
        this.dialogVisible = false;
        this.recv.name = cmd.name;
        this.recv.tel = cmd.tel;
        cmd.recv[0] = this.recv;
        cmd.display.name = this.dname;
        // console.log(this.$cp(cmd));
        this.upData(cmd);
      } else {
        this.cdata = cmd;
        this.recv = cmd.recv[0];
        this.dname = cmd.display.name;
        this.dialogVisible = true;
      }
    }
  },
  created() {
    this.$axios
      .post("q.php", {
        cmd: 0,
        val: { token: sessionStorage.token, table: "address" }
      })
      .then(res => {
        this.addrs = res.data.result;
      });
    this.pageSizeChange();
  }
};
</script>
